<template>
	<view class="device-card" :class="status === 'on' ? 'online' : 'offline'" @click="pageJump">
		<view class="left">
			<view class="device-id">
				{{ code }}
			</view>
			<view class="device-pic">
				<img :src="picUrl" alt="ATM 图片" />
			</view>
		</view>
		<view class="right">
			<view class="status">
				{{ status === 'on' ? '运行中' : '已关机' }}
			</view>
			<view class="device-address">
				{{ area }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DeviceCard",

		props: {
			id: {
				type: Number,
			},
			status: {
				type: String
			},
			code: {
				type: String,
			},
			picUrl: {
				type: String,
				default: '/static/ATM_pic.png'
			},
			area: {
				type: String,
				default: '长沙岳麓分行'
			}
		},

		data() {
			return {

			};
		},

		methods: {
			handleClick() {
				this.$confirm(`是否确定移除该用户对设备${this.id}的管理权限?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: "myMsgBox"
				}).then(() => {
					uni.showToast({
						title: "移除成功",
						duration: 2000,
					})
					// 刷新页面
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index',
							success: () => {
								uni.navigateBack();
							}
						})
					}, 2000);
				}).catch(() => {
					uni.showToast({
						title: "已取消",
						duration: 2000,
						icon: "error"
					})
				});
			},

			pageJump() {
				uni.navigateTo({
					url: `/pages/deviceManagement/deviceDetails?id=${this.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.device-card {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;
		padding: 12px 16px;
		width: 316px;
		height: 172px;
		border-radius: 8px;
		color: #FFF;
		font-family: 'Times New Roman', Times, serif;
		font-weight: 500;
		box-sizing: border-box;
	}

	.online {
		background-image: linear-gradient(to bottom right, #F4CE98, #FFFBC7, #FBB03B, #EDD181, #FFFBC7); // 渐变
	}

	.offline {
		background-color: rgb(154, 154, 154, 0.9);
		background-image: linear-gradient(to bottom right, #f5f5f5, #777, #aaa, #333333, #eeeeee);
	}

	.device-id {
		margin-bottom: 8px;
		font-size: 20px;
		font-weight: 700;
		line-height: 24px;
	}

	.online .device-id {
		text-shadow: 0px 0px 4px #8c4f13;
	}

	.offline .device-id {
		text-shadow: 0px 0px 4px #000;
	}

	.device-pic {
		width: 156px;
		height: 114px;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.device-card .right {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: flex-end;
	}

	.device-address,
	.status {
		line-height: 28px;
		color: #FFF;
	}

	.online .device-address,
	.online .status {
		text-shadow: 1px 1px 1px #8c4f13;
	}

	.offline .device-address,
	.offline .status {
		text-shadow: 1px 1px 1px #000;
	}
</style>